<template>
	<div class="login_container">
		<div class="login_box">
			<!--頭像區域-->
			<div class="avatar_box">
				<img src="./../assets/logo.png" />
			</div>
			<!--登錄表單區域-->
			<el-form
				:model="loginForm"
				:rules="loginFormRules"
				ref="loginFormRef"
				label-width="0px"
				class="login_form"
			>
				<el-form-item prop="username">
					<el-input
						v-model="loginForm.username"
						prefix-icon="iconfont icon-user"
					></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input
						v-model="loginForm.password"
						prefix-icon="iconfont icon-3702mima"
					></el-input>
				</el-form-item>
				<el-form-item class="btns">
					<el-button type="primary" @click="login">登錄</el-button>
					<el-button type="info" @click="resetLoginForm">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			loginForm: {
				username: 'glzadmin',
				password: '123456',
			},
			loginInfo: {
				COMMONINFO: {
					LANGUAGE: 0,
					CURR: 'sample string 1',
					NO_DEVICE: 2,
				},
				TOKENINFO: {
					ST_CUSTOMER_CODE: 'sample string 1',
					NO_INDEXID: 2,
					ST_TOKEN: 'sample string 3',
					ST_IPADDRESS: 'sample string 4',
					ST_UIDENTIFIER: 'sample string 5',
					ST_TEMPORARYID: 'sample string 6',
				},
				VIPCONTENT: {
					ST_CUSTOMER_CODE: 'sample string 1',
					ST_WEBPW: 'sample string 2',
					ST_TOKEN: 'sample string 3',
					ST_IPADDRESS: 'sample string 4',
					ST_LOGIN_CODE: 'sample string 5',
					ST_AREACODE: 'sample string 6',
					ST_TEMPORARYID: 'sample string 7',
					MD_DEVICEINFO: {
						ST_MACADDRESS: 'sample string 1',
						ST_UIDENTIFIER: 'sample string 2',
						ST_DEVICENAME: 'sample string 3',
						ST_DEVICETYPE: 'sample string 4',
						ST_MODEL: 'sample string 5',
						ST_OPERATINGSYSTEM: 'sample string 6',
						ST_OSVERSION: 'sample string 7',
					},
				},
			},
			loginFormRules: {
				username: [
					{ required: true, message: '请输入帳號', trigger: 'blur' },
					{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
				],
				password: [
					{ required: true, message: '请输入密碼', trigger: 'blur' },
					{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
				],
			},
		}
	},
	methods: {
		resetLoginForm() {
			this.$refs.loginFormRef.resetFields()
		},
		login() {
			this.$refs.loginFormRef.validate(async (valid) => {
				if (!valid) {
					this.$message({
						showClose: true,
						message: '失敗',
						type: 'error',
					})
					return
				} else {
					const { data: res } = await this.$http.post('/vip/alogin/login', this.loginForm)
					if (res.meta.status !== 200) return this.$message.error('登錄失敗')
					this.$message({
						showClose: true,
						message: '登錄成功',
						type: 'success',
					})
					window.sessionStorage.setItem('token', res.data.token)
					this.$router.push('/home')
					return
				}
			})
		},
	},
}
</script>

<style lang="less" scoped>
.login_container {
	background-color: #2b4b6b;
	height: 100%;
}
.login_box {
	width: 450px;
	height: 300px;
	background-color: #fff;
	border-radius: 3px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	.avatar_box {
		height: 130px;
		width: 130px;
		border: 1px solid #eee;
		border-radius: 50%;
		padding: 10px;
		box-shadow: 0 0 10px #ddd;
		position: absolute;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background-color: #eee;
		}
	}

	.login_form {
		position: absolute;
		bottom: 0;
		width: 100%;
		padding: 0 20px;
		box-sizing: border-box;

		.btns {
			display: flex;
			justify-content: flex-end;
		}
	}
}
</style>
